classId<template>
  <div>
    <el-card shadow="never" class="card">
      <el-form ref="searchform" :model="aListOfRegionsFrom">
        <el-form-item label="区域搜索：">
          <el-input
            v-model="aListOfRegionsFrom.name"
            class="elinput1"
          />
          <el-button type="primary" class="inquire" icon="el-icon-search" size="small" @click="inquire">查询</el-button>
        </el-form-item>

      </el-form>
    </el-card>
    <el-card shadow="never">
      <el-button
        size="small"
        class="el-btn"
        icon="el-icon-circle-plus-outline"
        @click="adddialogVisible = true"
      >新建</el-button>
      <el-table :data="aListOfRegionsList" style="width: 100%">
        <el-table-column label="序号" type="index" />
        <el-table-column prop="name" label="区域名称" width="390" />
        <el-table-column prop="nodeCount" label="点位数" width="390" />
        <el-table-column prop="remark" label="备注说明" width="390" />
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-link type="primary" @click="seeDetails(scope.row)">查看详情</el-link>
            <el-link type="primary" @click="revise(scope.row)">修改</el-link>
            <el-link type="danger" @click="deleList(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页区域 -->
      <el-pagination
        :current-page="aListOfRegionsFrom.pageIndex"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="aListOfRegionsFrom.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 新增区域对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="adddialogVisible"
      width="40%"
    >
      <el-form ref="ruleForm" :model="addFrom" :rules="addFromrules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="区域名称" prop="regionName">
          <el-input v-model="addFrom.regionName" maxlength="15" />
        </el-form-item>
        <el-form-item label="备注说明" prop="remark">
          <el-input v-model="addFrom.remark" type="textarea" maxlength="40" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adddialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getaddANewRegion">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改区域对话框 -->
    <el-dialog
      title="修改区域"
      :visible.sync="revisedialogVisible"
      width="40%"
    >
      <el-form ref="ruleForm" :model="addFrom" :rules="addFromrules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="区域名称" prop="regionName">
          <el-input v-model="addFrom.regionName" maxlength="15" />
        </el-form-item>
        <el-form-item label="备注说明" prop="remark">
          <el-input v-model="addFrom.remark" type="textarea" maxlength="40" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="revisedialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifyTheRegion">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看详情对话框 -->
    <el-dialog
      title="区域详情"
      :visible.sync="detaildialogVisible"
      width="30%"
    >
      <div class="maxbox">
        <div>区域名称: {{ uname }}</div>
        <div class="header">包含点位:    </div>
        <div class="pointBox">
          <el-table
            :data="detailList"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              type="index"
            />
            <el-table-column
              prop="name"
              label="点位名称"
              width="150"
            />
            <el-table-column
              prop="vmCount"
              label="设备数量"
              width="150"
            />
          </el-table>
        </div>

      </div>
    </el-dialog>
  </div>
</template>

<script>
import { aListOfRegions, addANewRegionAPI, pointSearchAPI, modifyTheRegionAPI, deleteAZone } from '@/api/point.js'
export default {
  data() {
    return {
      // 区域列表数据
      aListOfRegionsFrom: {
        pageIndex: 1,
        pageSize: 10,
        name: null,
        regionId: null
      },
      // 表单初始树枝
      aListOfRegionsList: [],
      // 查看详情
      detailList: [],
      // 查看详情处理数据
      uname: null,
      // total
      totalCount: null,
      // 添加表单
      addFrom: {
        regionName: '',
        remark: '',
        id: ''
      },
      // 添加表单对话框
      adddialogVisible: false,
      // 查看详情对话框
      detaildialogVisible: false,
      // 修改区域对话框
      revisedialogVisible: false,
      // 添加表单验证规则
      addFromrules: {
        regionName: [
          { required: true, message: '请输入', trigger: 'blur' }
          // { max: 15, message: '长度超出限制', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入', trigger: 'blur' }
          // { max: 40, message: '长度超出限制', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 区域列表数据
    this.getaListOfRegions()
  },
  methods: {
    // 区域列表数据
    async getaListOfRegions() {
      const res = await aListOfRegions(this.aListOfRegionsFrom)
      this.aListOfRegionsList = res.currentPageRecords
      this.totalCount = res.totalCount - 0
    },
    // 新增区域
    async getaddANewRegion() {
      await addANewRegionAPI(this.addFrom)
      this.getaListOfRegions()
      this.$message.success('添加成功！')
      this.adddialogVisible = false
    },
    // 分页区域逻辑
    handleSizeChange(newSize) {
      this.aListOfRegionsFrom.pageSize = newSize
      this.getaListOfRegions()
    },
    handleCurrentChange(newNum) {
      this.aListOfRegionsFrom.pageIndex = newNum
      this.getaListOfRegions()
    },
    // 查询
    inquire() {
      this.getaListOfRegions()
    },
    // 查看详情
    async seeDetails(row) {
      this.uname = row.name
      this.aListOfRegionsFrom.regionId = row.id
      const res = await pointSearchAPI(this.aListOfRegionsFrom)
      this.detailList = res.currentPageRecords
      this.detaildialogVisible = true
    },
    // 修改
    revise(row) {
      this.addFrom.id = row.id
      this.addFrom.regionName = row.name
      this.addFrom.remark = row.remark
      this.revisedialogVisible = true
    },
    async  modifyTheRegion() {
      await modifyTheRegionAPI({ id: this.addFrom.id, regionName: this.addFrom.regionName, remark: this.addFrom.remark })
      this.getaListOfRegions()
      this.revisedialogVisible = false
    },
    async deleList(row) {
      const prve = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      if (row.nodeCount !== 0) return this.$message.error('该地区存在点位，不能删除哦～')
      if (prve !== 'confirm') return this.$message.info('已取消删除')
      await deleteAZone(row.id)
      this.$message.success('删除成功！')
      this.getaListOfRegions()
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 15px;
  height: 85px;

}
.el-btn {
  margin-bottom: 15px;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  color: #fff;
  height: 36px;
}
.el-link {
  margin-right: 10px;
}
.el-pagination{
  margin-top: 15px;
}
.elinput1{
  width: 200px;
   height: 30px;
   line-height: 20px;
   margin-right: 20px;
   ::v-deep .el-input__inner {
    height: 30px !important;
    line-height: 30px !important;
   }
}

.inquire{
  background-color: #5f84ff !important;
  height: 30px;
  // width: 70px;
}
.maxbox{
  position: relative;
  height: 200px;
  .header{
    margin-top: 17px;
  }
}
.pointBox{
  position: absolute;
  top: 17px;
  left: 60px;
  height: 85px;
  background-color: skyblue;
}

</style>
